<template>
	<!-- 农产品收藏 -->
	<div class="body">
		<el-empty description="暂无数据" v-if="!farmData.length"></el-empty>
		<div class="farmBody"><!-- 农产品内容与分类大框 -->
			<div class="FarmBox">
				<el-card class="farmCard"  v-for="(item,index) in farmData"
					:key="index" shadow="hover">
					<div @click="skipFarmInfo(item.farmId)">
						<img :src="$store.state.imgShowRoad2 + '/file/' + item.shopPicture"/>
						<div class="farmname">
							<span>{{item.farmName}}</span>
						</div>
					</div>
					<div style="display: flex;justify-content: space-between;align-items: center">
						<div style="color: #ff6000;margin: 0 8px 0 8px;">
							<span style="font-size: 16px; line-height: 16px;margin-right: 2px;">￥</span>
							<span style="font-size: 18px;">{{minSpecPrice(item)}}</span>
						</div>
						<div class="tendency" @click="postCollectFarm(item.farmId,item.collectOrNot)">
							<img :src="item.collectOrNot === true ? shoucang.hover : shoucang.default" alt="收藏" />
							<span :class="{ 'hover': item.collectOrNot === true }">{{item.collectCount}}</span>
						</div>
					</div>
				</el-card>
			</div>
		</div>
		<div class="footer_page">
			<el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
				layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
		</div>
	</div>
</template>

<script>
	import farmApi from "@/api/farm.js"
	export default {
		data() {
			return {
				total: 0,
				pageSize: 30,
				currentPage: 1,
				farmData: [],
				shoucang: {
					default: require('@/assets/images/shoucang.png'),
					hover: require('@/assets/images/shoucang2.png')
				},
			}
		},
		methods: {
			async getMyCollects() {
				const res = await farmApi.getMyCollects("/ZnCollectFarm/getMyCollects", {
					currentPage: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.farmData = res.data.records;
					this.total = res.data.total;
				}
			},
			handleCurrentChange(page) {
				this.currentPage = page;
				this.getMyCollects();
			},
			minSpecPrice(item) {
				// 计算每个 item 对应的最小 znSpecPrice
				if (!item || !item.specificationBeans) {
					return null;
				}
				const prices = item.specificationBeans.map(spec => spec.znSpecPrice);
				const minPrice = Math.min(...prices);
				return minPrice;
			},
			skipFarmInfo(item) {
				this.$router.push({
					path: `/FarmInfoPage/${item}`
				}).catch(err => err);
			},
			async postCollectFarm(farmId,collectOrNot) {
				if (this.$store.getters.gettoken == null) {
					this.$message.warning('您还未登录！');
				} else {
					let collectOrNotBean = {
						farmId: farmId,
						collectStatus: collectOrNot === false ? 1 : 0
					};
					const res = await farmApi.postCollectFarm("/ZnCollectFarm/postCollectFarm", collectOrNotBean);
					if (res.code == 200) {
						this.getMyCollects();
						this.$message.warning("取消收藏");
					}
				}
			},
		},
		created() {
			this.getMyCollects();
		}
	}
</script>

<style lang="scss" scoped>
	.farmBody {
		width: 100%;
		display: flex;
		margin: 15px 0 0 0;
		.FarmBox {
			display: flex;
			flex-wrap: wrap;
	
			.farmCard {
				margin: 0 10px 15px 0;
				width: 220px;
				height: 300px;
	
				img {
					margin: 0 0 10px 0;
					width: 100%;
					height: 100%;
				}
	
				::v-deep .el-card__body {
					padding: 0;
				}
	
				.farmname {
					margin: 0 8px 10px 8px ;
					
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					span {
						font-size: 12px;
					}
	
				}
			}
			.tendency {
				display: flex;
				align-items: center;
				color: #909090;
				margin-right: 10px;
				img {
					margin: 0;
					width: 24px;
				}
			
				span {
					font-family: PingFangSC-Regular;
					font-size: 20px;
			
				}
			}
		}
	}
</style>